<template>
  <div>
<!--    <div class="table-page-search-wrapper">-->
<!--      <a-form-model :model="queryParam" layout="inline">-->
<!--        <a-row :gutter="10">-->
<!--          <a-col :md="6" :sm="24">-->
<!--            <a-form-model-item label="入职时间">-->
<!--              <a-range-picker @change="onChange" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :md="6" :sm="24">-->
<!--              <span class="table-page-search-submitButtons">-->
<!--                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>-->
<!--              </span>-->
<!--          </a-col>-->
<!--        </a-row>-->
<!--      </a-form-model>-->
<!--    </div>-->
    <s-table
      bordered
      ref="table"
      :rowKey="(record) => record.uid"
      :columns="leaveColumns"
      :data="leaveData"
    >
      <div
        slot="filterSelect"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-select
          show-search
          style="width: 188px; margin-bottom: 8px; display: block;"
          :placeholder="`选择${column.title}`"
          :value="selectedKeys[0]"
          :filter-option="filterOption"
          @change="(value) => setSelectedKeys(value ? [value] : [])"
          @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        >
          <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>
        </a-select>
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
          重置
        </a-button>
      </div>
      <div
        slot="filterRange"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-range-picker
          style="width: 228px; margin-bottom: 8px; display: block;"
          :value="createValue"
          @change="onChange"
          @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 110px; margin-right: 8px"
          @click="() => handleRange(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 110px" @click="() => rangeReset(clearFilters, column.dataIndex)">
          重置
        </a-button>
      </div>
      <template slot='group_type' slot-scope='text'>
        {{text === 'pt' ? '专利' : text === 'sh' ? '售后' : '商标'}}
      </template>
      <template slot="username" slot-scope='text, record'>
        <div v-html="record.username_format"></div>
      </template>
      <template slot="work_status" slot-scope="text, record">
        <a-button size="small" icon="edit" type="danger" @click="editStatus(record.uid, record.parent_id)">{{workOpts[text]}}</a-button>
      </template>
      <template slot="status" slot-scope="text">
        <a-tag v-if="text == 1" color="blue">正常</a-tag>
        <a-tag v-if="text == 0" color="red">禁用</a-tag>
      </template>
      <template slot="action" slot-scope="text,record">
        <a-button type="primary" size="small" :style="{ marginRight: '5px' }" @click="editMember(record.uid)">编辑</a-button>
        <a-button type="danger" size="small" @click="onMove(record.uid)">转移数据</a-button>
      </template>
    </s-table>
    <a-modal
      title="添加组员"
      v-model="editVisible"
      :width="600"
      @ok="onSubmit"
      @cancel="resetForm"
    >
      <a-form-model
        ref="editForm"
        :model="editForm"
        :rules="editRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="用户名" prop="username">
          <a-input type="text" v-model="editForm.username" placeholder="请输入用户名"/>
        </a-form-model-item>
        <a-form-model-item label="密码" prop="password">
          <a-input-password v-model="editForm.password" placeholder="请输入登陆密码"/>
        </a-form-model-item>
        <a-form-model-item label="选择工作台" prop="group">
          <a-select v-model="editForm.group" placeholder="选择所属工作台">
            <a-select-option v-for="(item,index) in groupOpts" :key="index" :value="index">{{ item }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="选择所属上级" prop="parent_id">
          <a-select v-model="editForm.parent_id" placeholder="选择所属上级">
            <a-select-option v-for="(item,index) in userOpts" :key="index" :value="index">{{ item }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="用户状态" prop="status">
          <a-radio-group name="radioGroup" v-model="editForm.status">
            <a-radio v-for="(item, index) in statusOpts" :key="index" :value="index">
              {{ item }}
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="是否领取新资源" prop="is_can_receive">
          <a-radio-group name="radioGroup" v-model="editForm.is_can_receive">
            <a-radio v-for="(item,index) in ynOpts" :key="index" :value="index">
              {{ item }}
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="通时限制" prop="receive_is_need_ts">
          <a-radio-group name="radioGroup" v-model="editForm.receive_is_need_ts">
            <a-radio v-for="(item,index) in ynOpts" :key="index" :value="index">
              {{ item }}
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="添加微信限制" prop="receive_is_need_wx">
          <a-radio-group name="radioGroup" v-model="editForm.receive_is_need_wx">
            <a-radio v-for="(item,index) in ynOpts" :key="index" :value="index">
              {{ item }}
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="选择角色" prop="role">
          <a-select v-model="editForm.role" placeholder="选择所属上级">
            <a-select-option v-for="(item, index) in roleOpts" :key="index" :value="index">{{ item }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="考拉通讯账号">
          <a-input type="text" v-model="editForm.kaola_accounts" placeholder="输入考拉通信的账号"/>
        </a-form-model-item>
        <a-form-model-item label="南方电信账号">
          <a-input type="text" v-model="editForm.nanfang_accounts" placeholder="输入南方电信的账号"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      title="编辑工作状态"
      v-model="statusVisible"
      :width="200"
      @ok="submitStatus"
    >
      <a-radio-group v-model="memberStatus">
        <a-radio v-for="(item, index) in memberStatusOpts" :key="index" :value="index">{{item}}</a-radio>
      </a-radio-group>
    </a-modal>
    <a-modal
      title="转移数据"
      v-model="transferVisible"
      :width="500"
      :destroy-on-close="true"
      @ok="submitMove"
      @cancel="() => this.transferType = 1"
    >
      <a-tabs v-model="tab">
        <a-tab-pane key="1" tab="已成单客户"></a-tab-pane>
        <a-tab-pane key="2" tab="未成单客户"></a-tab-pane>
      </a-tabs>
      <a-radio-group style="margin-bottom:10px" v-model="transferType" @change="onTransferChange">
        <a-radio :value="1">
          转移至顾问
        </a-radio>
        <a-radio :value="2">
          转移至共享库
        </a-radio>
      </a-radio-group>
      <template v-if="transferType == 1">
        <a-spin :spinning="loading">
          <a-alert
            message="转移包含：客户、业务、合同"
            description="此操作不可逆，且只可转移给售后组人员"
            type="error"
            show-icon
          />
          <p style="font-size: 16px; margin: 15px 0;">要将<span style="color: #f00">【{{username}}】</span>的数据转移给</p>
          <a-select
            show-search
            v-model="moveForm.newid"
            :filter-option="filterOption"
            style="width: 100%"
            placeholder="请选择数据要转移给谁"
          >
            <a-select-option :disabled="item.disable == 1" v-for="item in userOpts" :key="item.uid" :value="item.uid">{{item.username}}</a-select-option>
          </a-select>
        </a-spin>
      </template>
      <template v-if="transferType == 2">
        <a-spin :spinning="loading">
          <a-alert
            message="注意：此类型仅转移客户"
            description="此操作不可逆，谨慎操作"
            type="error"
            show-icon
          />
        </a-spin>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import col from '@/columns/member'
import {
  getEditMember,
  getMemberStatus,
  getTransfer,
  postEditMember,
  postMemberStatus,
  postTransfer,
  settingList
} from '@/api/member'
const leaveColumns = col.leave
export default {
  components: {
    STable
  },
  name: 'MLeave',
  data () {
    return {
      leaveColumns,
      leaveData: parameters => {
        return settingList(Object.assign(parameters, this.queryParam)).then(res => {
          this.workOpts = res.result.work_status_opts
          this.statusOpts = res.result.status_opts
          this.adviserOpts = res.result.adviser_array_lz
          return res.result
        })
      },
      editVisible: false,
      transferVisible: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      editRules: {
        username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ],
        group: [ { required: true, message: '请选择工作组', trigger: 'change' } ],
        parent_id: [ { required: true, message: '请选择所属上级', trigger: 'change' } ],
        status: [ { required: true, message: '选择用户状态', trigger: 'change' } ],
        is_can_receive: [ { required: true, message: '选择是否有领取新资源的权限', trigger: 'change' } ],
        receive_is_need_ts: [ { required: true, message: '选择此用户是否限制通时', trigger: 'change' } ],
        receive_is_need_wx: [ { required: true, message: '请选择此用户是否限制微信添加数', trigger: 'change' } ],
        role: [ { required: true, message: '请选择此用户的角色', trigger: 'change' } ]
      },
      statusOpts: {},
      workOpts: {},
      queryParam: {},
      editForm: {},
      groupOpts: {},
      roleOpts: {},
      userOpts: {},
      adviserOpts: {},
      ynOpts: {},
      uid: '',
      parent: '',
      statusVisible: false,
      memberStatus: '',
      memberStatusOpts: {},
      moveForm: {},
      username: '',
      loading: false,
      createValue: [],
      transferType: 1,
      tab: '1'
    }
  },
  created () {
    this.queryParam['filter[tab]'] = 20
  },
  methods: {
    onChange (date, dateString) {
      this.createValue = date
      this.queryParam['filter[begin_hiredate_time]'] = dateString[0]
      this.queryParam['filter[end_hiredate_time]'] = dateString[1]
    },
    onTransferChange (e) {
      this.transferType = e.target.value
    },
    handleSelect (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
    },
    handleRange (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.$refs.table.refresh(true)
    },
    rangeReset (clearFilters) {
      clearFilters()
      this.createValue = []
      delete this.queryParam['filter[begin_hiredate_time]']
      delete this.queryParam['filter[end_hiredate_time]']
      this.$refs.table.refresh(true)
    },
    handleReset (clearFilters, dataIndex) {
      clearFilters()
      delete this.queryParam['filter[' + dataIndex + ']']
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    editMember (uid) {
      const app = this
      getEditMember(uid).then(res => {
        if (res.status === 0) {
          app.groupOpts = res.result.group_opts
          app.roleOpts = res.result.role_opts
          app.userOpts = res.result.user_opts
          app.ynOpts = res.result.yn_opts
          app.statusOpts = res.result.status_opts
          app.editForm = res.result.user
          app.uid = uid
          app.editVisible = true
        }
      })
    },
    resetForm () {
      this.$refs.editForm.resetFields()
    },
    editStatus (uid, parent) {
      getMemberStatus(uid).then(res => {
        if (res.status === 0) {
          this.memberStatusOpts = res.result.items
          this.uid = uid
          this.parent = parent
          this.memberStatus = res.result.selection
          this.statusVisible = true
        } else {
          this.$warning({
            title: res.msg
          })
        }
      })
    },
    submitStatus () {
      const app = this
      const data = {}
      data['user[work_status]'] = app.memberStatus
      data['user[parent_id]'] = app.parent
      postMemberStatus(app.uid, data).then(res => {
        if (res.status === 0) {
          app.statusVisible = false
          app.$refs.table.refresh()
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    onMove (uid) {
      const app = this
      app.uid = uid
      getTransfer(uid).then(res => {
        if (res.status === 0) {
          app.userOpts = res.result.to_user_opts2
          app.username = res.result.old_username
          app.transferVisible = true
        }
      })
    },
    submitMove () {
      const app = this
      const data = {}
      const ctype = this.tab
      app.loading = true
      if (app.transferType === 1) {
        data['to_uid'] = app.moveForm.newid
      } else {
        data['is_abandon'] = 1
      }
      postTransfer(app.uid, data, ctype).then(res => {
        if (res.status === 0) {
          app.transferVisible = false
          app.loading = false
          app.$refs.table.refresh()
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    onSubmit () {
      const app = this
      const data = {}
      app.$refs.editForm.validate(valid => {
        if (valid) {
          for (const k in app.editForm) {
            data['user[' + k + ']'] = app.editForm[k]
          }
          postEditMember(app.uid, data).then(res => {
            if (res.status === 0) {
              app.resetForm()
              app.editVisible = false
              app.$refs.table.refresh()
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
